<script setup lang="ts">
import { computed, onMounted, ref, shallowRef } from 'vue'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import defaults from './default-chart-option'

import type { CustomerHealth } from '../type'

defineOptions({ name: 'ItemServen' })

const props = defineProps<{
  data: CustomerHealth
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    title: {
      text: '老客户占比50%~70%为最佳状态',
      textStyle: {
        color: '#C0E7FF',
        opacity: 0.7,
        fontSize: 14,
        fontWeight: 500,
      },
      left: 'center',
      top: 10,
    },
    tooltip: {
      ...defaults.tooltip,
      trigger: 'item',
    },
    color: ['rgba(249,200,36,1)', 'rgba(23,230,255,1)'],
    series: [{
      type: 'pie',
      startAngle: 90,
      radius: ['34s%', '45%'],
      center: ['50%', '55%'],
      padAngle: 3,
      avoidLabelOverlap: false,
      itemStyle: {
        opacity: 0.3,
        borderRadius: 4,
      },
      label: {
        show: false,
      },
      emphasis: {
        disabled: true,
      },
      data: data.value,
    }, {
      type: 'pie',
      startAngle: 90,
      radius: ['42%', '47%'],
      center: ['50%', '55%'],
      padAngle: 3,
      avoidLabelOverlap: false,
      zlevel: 1,
      itemStyle: {
        borderRadius: 4,
      },
      label: {
        alignTo: 'edge',
        minMargin: 10,
        lineHeight: 26,
        edgeDistance: '26%',
        formatter(params: any) {
          // 获取当前数据项的百分比
          const percentage = params.percent
          // 返回自定义格式的标签
          return `{name|${params.name}}\n{percent|${percentage}%}`
        },
        rich: {
          name: {
            fontSize: 13,
            color: 'rgba(208, 226, 249, 0.6)', // 名称的颜色
          },
          percent: {
            fontSize: 14,
            color: 'inherit',
          },
        },
      },
      labelLine: {
        show: true, // 显示引导线
        length: 10, // 引导线第一段的长度
        length2: 30, // 引导线第二段的长度
        smooth: false, // 引导线平滑
      },
      emphasis: {
        disabled: true,
      },
      data: data.value,
    }],
  }
})

const show = ref(false)

onMounted(() => {
  data.value = [
    { name: '老客户', value: props.data.old },
    { name: '新客户', value: props.data.new },
  ]
  setOption(option.value)
  setTimeout(() => {
    show.value = true
  }, 300)
})
</script>

<template>
  <div class="block-bottom flex flex-col">
    <div class="block-bottom-head w-full text-center text-lg font-pmzd">
      客户结构健康度
    </div>
    <div class="relative h-62 w-full flex-auto">
      <div ref="chartRef" style="width: 100%;height:100%" />
      <Transition enter-active-class="animate__animated animate__fadeIn animate__delay-2s">
        <div v-if="show" class="pie-center">
          <div class="pie-center-circle" />
          <img src="./item-serven-icon.png" class="pie-center-img h-10 w-10">
        </div>
      </Transition>
    </div>
  </div>
</template>
